<template>
  <div class="snote s-fc4 ztag">搜索“z”，找到 <em class="s-fc6">20</em> 首单曲</div>
  <ul
    class="m-tabs m-tabs-srch f-cb ztag"
    data-xname=""
    id="auto-id-qruJhL8QLXd8fC3h"
    style="margin-bottom: auto"
  >
    <li class="fst">
      <a data-type="1" href="javascript:void(0)" class="z-slt"><em>单曲</em></a>
    </li>
    <li>
      <a hidefocus="true" data-type="100" href="javascript:void(0)"><em>歌手</em></a>
    </li>
    <li>
      <a hidefocus="true" data-type="10" href="javascript:void(0)"><em>专辑</em></a>
    </li>
    <li>
      <a hidefocus="true" data-type="1014" href="javascript:void(0)"><em>视频</em></a>
    </li>
    <li>
      <a hidefocus="true" data-type="1006" href="javascript:void(0)"><em>歌词</em></a>
    </li>
    <li>
      <a hidefocus="true" data-type="1000" href="javascript:void(0)"><em>歌单</em></a>
    </li>
    <li>
      <a hidefocus="true" data-type="1009" href="javascript:void(0)"><em>声音主播</em></a>
    </li>
    <li>
      <a hidefocus="true" data-type="1002" href="javascript:void(0)"><em>用户</em></a>
    </li>
  </ul>
</template>

<script>
export default {
  name: "SearchHead",
};
</script>

<style scoped lang="less">
.m-tabs {
  height: 39px;
  border: 1px solid #ccc;
  border-width: 0 1px;
  background-position: 0 0;
  background-repeat: repeat-x;
  li {
    float: left;
    position: relative;
    left: -1px;
    height: 39px;
    font-size: 14px;
  }
  a.z-slt {
    background-position: left -90px;
    em {
      background-position: right -90px;
    }
  }
  a {
    padding-left: 2px;
  }
  em {
    float: left;
    height: 37px;
    width: 134px;
    padding: 2px 2px 0 0;
    line-height: 37px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    &:hover {
      background-position: right -45px;
    }
  }
  a {
    float: left;
    height: 39px;
    font-size: 14px;
  }
}
.m-tabs-srch em {
  width: 108px;
}
.snote {
  margin: 28px 0 17px;
}
</style>
